<template>
  <div class="skill">
   
<mt-navbar v-model="selected">
  <mt-tab-item id="guifan">规范</mt-tab-item>
  <mt-tab-item id="kuangjia">框架</mt-tab-item>
  <mt-tab-item id="yuyan">语言</mt-tab-item>
  <mt-tab-item id="kaifagongju">开发工具</mt-tab-item>
  <mt-tab-item id="goujiangongju">构建工具</mt-tab-item>
</mt-navbar>

<!-- tab-container -->
<mt-tab-container v-model="selected">
  <mt-tab-container-item :id="selected">
   <div v-for="item in dataSkill" class="skillList">
    <mt-cell title="">
  <span class="content">{{item.content}}</span>
  <img slot="icon" class="skillIcon" :src="item.url" width="24" height="24">
</mt-cell>
</div>
  </mt-tab-container-item>
</mt-tab-container>
  <!-- 

 <mt-tab-container-item id="kuangjia">
   <div v-for="item in dataSkill" class="skillList">
    <mt-cell title="">
  <span class="content">{{item.content}}</span>
  <img slot="icon" class="skillIcon" :src="item.url" width="24" height="24">
</mt-cell>
</div>
  </mt-tab-container-item>

   <mt-tab-container-item id="yuyan">
   <div v-for="item in dataSkill" class="skillList">
    <mt-cell title="">
  <span class="content">{{item.content}}</span>
  <img slot="icon" class="skillIcon" :src="item.url" width="24" height="24">
</mt-cell>
</div>
  </mt-tab-container-item>

   <mt-tab-container-item id="kaifagongju">
   <div v-for="item in dataSkill" class="skillList">
    <mt-cell title="">
  <span class="content">{{item.content}}</span>
  <img slot="icon" class="skillIcon" :src="item.url" width="24" height="24">
</mt-cell>
</div>
  </mt-tab-container-item>

     <mt-tab-container-item id="goujiangongju">
   <div v-for="item in dataSkill" class="skillList">
    <mt-cell title="">
  <span class="content">{{item.content}}</span>
  <img slot="icon" class="skillIcon" :src="item.url" width="24" height="24">
</mt-cell>
</div>
  </mt-tab-container-item>

  </mt-tab-container-item>
</mt-tab-container>
 -->


    
   
   </div>
</template>

<script>
import axios from 'axios';
export default {

  data () {
    return {
      guifan: '',
      selected:'guifan',
      dataSkill:''
    }
  },
    methods:{
      chanceSkill(){
          console.log("111")
      },

    getData(a){
  var that=this;
  if(!a){
    a="guifan"
  }

  axios.get('http://localhost:3000/'+a)
  .then(function (response) {
   that.dataSkill=response.data
  
  })
  .catch(function (error) {
    console.log(error);
  });
  
      }
  },
  created(){
    this.getData();
    console.log("111111"+this.selected);
  },
  watch:{
    selected:function(){
      console.log("selected--change"+this.selected);
      this.getData(this.selected);
    }
  }
}
</script>

<style lang="scss" scoped>

html,body{
  padding:0;
  margin:0;
}
.skill{
   padding-top:40px
}
.mint-navbar{
  margin-bottom:2px;
}
.skillIcon{
  padding:0;
  width:60px;
  height:60px;
  padding:0 15px
}
.skillList{
  border-bottom:1px solid #e8e8e8;
  padding: 5px 0;
}
.mint-cell-wrapper{
  padding:0;
}
.content{
  color:black;
  font-size:12px;
   line-height:16px
}
</style>
